/*
 * @Description:
 * @Author: py
 * @Date: 2024-08-09
 */
import { reactive } from 'vue'

export function useTable() {
    const gridOptions = reactive<any>({
        border: 'outer',
        columns: [
            { slots: { content: 'expand_content' }, type: 'expand', visible: false, width: 55 }, // 展开列
            { slots: { default: 'order_no' }, title: '订单编号', width: 335 },
            { slots: { default: 'order_time' }, title: '下单时间' },
        ],
        data: [],
        // expandConfig: {
        //     expandAll: true,
        //     reserve: true,
        //     visibleMethod: () => {
        //         return true
        //     },
        // },
        height: 500,
        loading: false,
        rowClassName: 'parent-row',
        rowConfig: {
            keyField: 'id',
        },
        showHeader: false,
        // stripe: false,
    })

    const childTableColumns = [
        // { type: 'checkbox', width: 55 }, // 多选列
        { slots: { default: 'goodsInfo' }, title: '商品信息', width: 220 },
        { field: 'orderQuantity', title: '数量', width: 60 },
        { slots: { default: 'payAmount' }, title: '实付款', width: 90 },
        { slots: { default: 'afterSaleStatus' }, title: '售后状态', width: 100 },
        { slots: { default: 'userInfo' }, title: '用户信息', width: 130 },
        { slots: { default: 'receiveInfo' }, title: '收货信息', width: 330 },
        { slots: { default: 'orderStatus' }, title: '订单状态', width: 90 },
        { slots: { default: 'operate' }, title: '操作' },
    ]

    // 子表格配置
    function childGridOptions(row) {
        const tableData = row.skuOrderList
        const data = row.isChildTableExpanded ? tableData : tableData.slice(0, 1)
        const rowspan = data.length
        return {
            align: 'center',
            border: true,
            // checkboxConfig: {
            //     checkStrictly: true, // 父子不互相关联
            //     // reserve: true, // 保留选择状态
            // },
            // columnConfig: {
            //     resizable: true,
            // },
            columns: childTableColumns,
            data,
            mergeCells: [{
                col: 2,
                colspan: 1,
                row: 0,
                rowspan,
            }, {
                col: 4,
                colspan: 1,
                row: 0,
                rowspan,
            }, {
                col: 5,
                colspan: 1,
                row: 0,
                rowspan,
            }],
            minHeight: 60,
            rowClassName: 'child-row',
            rowConfig: {
                keyField: 'orderLineId',
            },
            showHeader: false,
            showOverflow: false,
        }
    }

    const detailsGridOptions = reactive<any>({
        align: 'center',
        border: true,
        columnConfig: {
            resizable: true,
        },
        columns: [
            { slots: { default: 'goodsInfo' }, title: '商品信息', width: 260 },
            { field: 'orderQuantity', title: '数量', width: 80 },
            { field: 'orderAmount', title: '单价' },
            { slots: { default: 'discount' }, title: '优惠' },
            { slots: { default: 'payAmount' }, title: '小计' },
            { slots: { default: 'orderStatus' }, title: '状态' },
            { slots: { default: 'operate' }, title: '操作' },
        ],
        data: [],
        loading: false,
        minHeight: 60,
        rowClassName: 'table-row',
    })
    return { childGridOptions, childTableColumns, detailsGridOptions, gridOptions }
}
